import React from 'react';
import { Button, Table, Popconfirm, Modal } from 'antd';
import EditableCell from './EditCell';
import EditSelectCell from './EditSelectCell';

class FeatureOperation extends React.Component {
  constructor(props) {
    super(props);
    this.columns = [{
      title: '标记事件',
      dataIndex: 'eventName',
      width: '30%',
      render: (text, record) => (
        <EditSelectCell
          value={text}
          markPoint={this.state.markPoint}
          modalWarning={this.modalWarning}
          editing={this.state.editing}
          changeEditStatus={this.changeEditStatus}
          pickPoint={this.props.pickPoint}
          tagFilePath={this.state.tagFilePath}
          onChange={this.onCellChange(record.key, 'eventName')}
        />
      ),
    }, {
      title: '开始时间点',
      dataIndex: 'timeStart',
      width: '28%',
      render: (text, record) => (
        <EditableCell
          value={text}
          keys={record.key}
          cellType='timeStart'
          markPoint={this.state.markPoint}
          modalWarning={this.modalWarning}
          changeEditStatus={this.changeEditStatus}
          editing={this.state.editing}
          pickTime={this.pickTimeStart}
          pickPoint={this.props.pickPoint}
          tagFilePath={this.state.tagFilePath}
          onChange={this.onCellChange(record.key, 'timeStart')}
        />
      ),
    }, {
      title: '结束时间点',
      dataIndex: 'timeEnd',
      width: '28%',
      render: (text, record) => (
        <EditableCell
          value={text}
          keys={record.key}
          cellType='timeEnd'
          modalWarning={this.modalWarning}
          markPoint={this.state.markPoint}
          changeEditStatus={this.changeEditStatus}
          editing={this.state.editing}
          pickTime={this.pickTimeEnd}
          pickPoint={this.props.pickPoint}
          tagFilePath={this.state.tagFilePath}
          onChange={this.onCellChange(record.key, 'timeEnd')}
        />
      ),
    }, {
      title: '删除',
      dataIndex: 'delete',
      render: (text, record) => {
        return (
          this.state.markList.length > 1 ?
          (
            <Popconfirm title="确定删除这行吗?" onConfirm={() => this.onDelete(record.key)}>
              <a href="">del</a>
            </Popconfirm>
          ) : null
        );
      },
    }];
  } 

  state = {
    markList: [],
    tagFilePath: '',
    pickStatus: '',
    markPoint: [],
    editing: false,
  }

  changeEditStatus = (status) => {
    this.setState({editing: status});
  }

  modalWarning = () => {
    Modal.warning({
      title: '警告',
      content: '请先确认已选项目',
    });
  }

  onCellChange = (key, dataIndex) => {
    return (value) => {
      const dataSource = [...this.state.markList];
      const newDataSource = dataSource.map((item, index) => {
        if (item.key === key) {
          return Object.assign({}, item, {[dataIndex]: value});
        }
        return item;
      });
      this.props.changeInput({arr: newDataSource, path: this.state.tagFilePath, actionType: 'edit'});
    };
  }

  onDelete = (key) => {
    const dataSource = [...this.state.markList];
    const filterMark = dataSource.filter((item) => {
      return (item.key !== key);
    })
    this.props.changeInput({arr: filterMark, path: this.state.tagFilePath, actionType: 'delete'});
    if (key === this.state.markPoint[0]) {
      this.props.pickPoint([], this.props.tagFilePath, '');
      this.changeEditStatus(false);
    }
  }

  handleAdd = () => {
    const newObj = {
      "key": this.state.markList.length,
      "eventName": "",
      'timeStart': '',
      'timeEnd': '',
    };
    const eventObjArr = [...this.state.markList, ...[newObj]];
    this.props.changeInput({arr: eventObjArr, path: this.state.tagFilePath, actionType: 'add'});
  }

  componentWillReceiveProps(nextprops) {
    if (nextprops.tagFilePath && (nextprops.jsonTree[nextprops.tagFilePath]) && (nextprops.jsonTree[nextprops.tagFilePath].event.length)) {
      this.setState({ markPoint: nextprops.markItem, tagFilePath: nextprops.tagFilePath, markList: nextprops.jsonTree[nextprops.tagFilePath].event });  
    } else {
      this.setState({ markList: [], tagFilePath: nextprops.tagFilePath });
    }
  }

  pickTimeStart = (index, event) => {
    this.props.pickPoint([index, 0], this.props.tagFilePath, this.state.markList[index].eventName);
  }

  pickTimeEnd = (index, event) => {
    this.props.pickPoint([index, 1], this.props.tagFilePath, this.state.markList[index].eventName);
  }

  // toLocalTime = (timstamp) => {
  //   const date = new Date(timstamp);
  //   // const Y = date.getFullYear();
  //   // const Mon = ((date.getMonth() + 1) < 10) ? ('0' + (date.getMonth() + 1)) : date.getMonth() + 1;
  //   // const D = (date.getDate() < 10) ? ('0' + date.getDate()) : date.getDate();
  //   const H = (date.getHours() < 10) ? ('0' + date.getHours()) : date.getHours();
  //   const M = (date.getMinutes() < 10) ? ('0' + date.getMinutes()) : date.getMinutes();
  //   const sec = (date.getSeconds() < 10) ? ('0' + date.getSeconds()) : date.getSeconds();
  //   const Msec = (date.getMilliseconds() < 100) ? ((date.getMilliseconds() < 10) ? ('00' + date.getMilliseconds()) : ('0' + date.getMilliseconds())) : (date.getMilliseconds());
  //   return (H + ':' + M + ':' + sec + '.' + Msec);
  // }

  render() {
    const columns = this.columns;
    return (
      <div id="featureArea">
        <h1 style={{ fontSize: '16px', color: 'white', display: 'inline-block' }}>标记列表：</h1>
        {
          this.state.tagFilePath && (
          <Button onClick={this.handleAdd} type="primary" style={{ marginBottom: 16 }}>
            新增标记
          </Button>
          )
        }
        {
          this.state.tagFilePath && (
            <Table size='small' pagination={false} bordered dataSource={this.state.markList} columns={columns} />            
          )
        }
      </div>
    );
  }
}

export default FeatureOperation;
